<template>
  <div>
    <el-container>
      <el-header>
        <navigation-bar></navigation-bar>
      </el-header>
      <el-main>
        <el-card class="box-card">
          <div
            style="text-align: left; font-size: 35px"
            slot="header"
            class="clearfix"
          >
            <span>阅读排行</span>
          </div>
          <div>
            <el-card shadow="hover">
              <div class="block">
                <table>
                  <tr>
                    <td>
                      <div class="demo-image">
                        <!-- <span style="" class="demonstration"></span> -->
                        <el-image
                          style="width: 100px; height: 100px"
                        ></el-image>
                      </div>
                    </td>
                    <td
                      @click="
                        getArticleKey(index, item.article.id);
                        toArticleDetails();
                      "
                      style="
                        width: 100%;
                        text-align: center;
                        vertical-align: top;
                      "
                    >
                      <el-link target="_blank">
                        <!-- 文章标题 -->
                        <div id="articleTitle">{{ "item.article.title" }}</div>
                      </el-link>
                      <div id="details" style="text-align: left">
                        <span
                          style="
                            margin-left: 30px;
                            word-break: break-all;
                            word-wrap: break-word;
                          "
                        >
                          <!-- 文章内容 -->
                          {{ "item.article.articleDetails" }}
                        </span>
                      </div>
                    </td>
                  </tr>
                </table>

                <div id="crossline">
                  <!-- 浏览量 -->
                  <span
                    style="text-align: right; float: right; margin-left: 10px"
                  >
                    <el-button type="text" disabled>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-browse"></use>
                      </svg>
                      {{ "item.viewsCount" }}</el-button
                    >
                  </span>

                  <el-divider></el-divider>
                </div>
              </div>
            </el-card>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import NavigationBar from "../NavigationBar/NavigationBar.vue";

export default {
  components: {
    NavigationBar,
  },
  props: {
    AdminRecommend: [],
    CommentRecommend: [],
    ViewsRecommend: [],
    CommentRecommendCount: { default: 0 },
    ViewsRecommendCount: { default: 0 },
  },
  methods: {
    getArticleKey(index, id) {
      this.getIndex = index;
      this.getArticleId = id;

      console.log(this.getIndex);
      console.log(this.getArticleId);
    },
    toArticleDetails() {
      this.$router.push({
        path: "/articledetails", //页面路径
        query: {
          getIndex: this.getIndex,
          getArticleId: this.getArticleId,
        }, // 参数传值
      });
    },
  },
};
</script>

<style scoped>
.box-card {
  width: 70%;
  min-height: 900px;
  margin: auto;
}
.icon {
  width: 25px;
  height: 25px;
  vertical-align: -0.5em;
  fill: currentColor;
  overflow: hidden;
}
</style>
